<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/common.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/request.js"></script>
    <style>
        .right {
            color: green;
            font-size: 12px;
        }

        .err {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" id="user">
            <span id="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" id="pwd">
            <span id="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" id="phone">
            <span id="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" id="email">
            <span id="email_span"></span>
        </p>
        <p>
            <label for="">验证码:</label>
            <input type="text" id="code">
            <span id="createCode">a1b2</span>
            <span id="repwd_span"></span>
        </p>
        <!-- <p>
            <label>
                <input class="isRem" type="checkbox" name="" id="">
                记住密码?
            </label>
        </p> -->
        <p>
            <input id="btn" type="submit" value="注册">
        </p>
    </div>
</body>
<script>
    // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头

    // 判断的流程  从易到难的顺序 
    // a. 长度  6-12位 
    // b. 不能以数字开头
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _ $   6-12位 

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      中
    // 数字,大写,小写,特殊字符  中 出现3种      强
    // 数字,大写,小写,特殊字符  中 出现4种      超强

    // true + true + true + false  => 3 

    // 确认密码  
    // 和密码相同  

    // 验证码
    // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z )  
    // 2. 点击 验证码 进行切换
    // 3. 验证码输入判断  (输入的  随机生成的  保持一致)


    var userInp = document.getElementById("user");
    var pwdInp = document.getElementById("pwd");
    var phoneInp = document.getElementById("phone");
    var emailInp = document.getElementById("email");
    var codeInp = document.getElementById("code");
    var createCode = document.getElementById("createCode");
    var btn = document.getElementById("btn");




    createCode.textContent = randCode();

    var isUserRight = false;
    var isPwdRight = false;
    var isPhoneRight = false;
    var isEmailRight = false;
    var isCodeRight = false;

    userInp.onchange = userInp.onblur = function () {
        isUserRight = false;  // 每次触发函数  重新假设

        var user = userInp.value.trim();
        var reg = /^[a-zA-Z_$\u4e00-\u9fa5][\w$\u4e00-\u9fa5]{5,11}$/;

        var tipsSpan = next(userInp);

        judgeRuler(user, reg, tipsSpan, "由中文,英文,数字_ $组成,6-12位,且不能以数字开头", function () {
            // console.log("验证成功");


            // 还要连接数据库  判断用户名是否存在
            $.ajax({
                type: "get",
                url: "../php/isExistUser.php",
                data: {
                    user: user,
                },
                dataType: "json",
                success(result) {
                    console.log(result);
                    if (result.status) {
                        isUserRight = true;
                    } else {
                        tipsSpan.textContent = result.msg;
                        tipsSpan.className = "err";
                        isUserRight = false;
                    }
                }
            })


        });
    }

    pwdInp.onchange = pwdInp.onblur = function () {
        isPwdRight = false;
        var pwd = pwdInp.value.trim();
        var reg = /^[\w$]{6,12}$/;
        var tipsSpan = next(pwdInp);
        judgeRuler(pwd, reg, tipsSpan, "由中文,英文,数字_ $组成,6-12位", function () {
            console.log("验证成功");
            isPwdRight = true;

            // 密码格式正确  判断密码强度
            var numReg = /[0-9]/;
            var smallReg = /[a-z]/;
            var bigReg = /[A-Z]/;
            var speReg = /[_$]/;

            var numFlag = false;
            var smallFlag = false;
            var bigFlag = false;
            var speFlag = false;

            if (numReg.test(pwd)) {
                numFlag = true;
            }
            if (smallReg.test(pwd)) {
                smallFlag = true;
            }
            if (bigReg.test(pwd)) {
                bigFlag = true;
            }
            if (speReg.test(pwd)) {
                speFlag = true;
            }
            var sum = numFlag + smallFlag + bigFlag + speFlag;
            console.log(sum);
            switch (sum) {
                case 1: tipsSpan.textContent = "密码强度:弱"; break;
                case 2: tipsSpan.textContent = "密码强度:中"; break;
                case 3: tipsSpan.textContent = "密码强度:强"; break;
                case 4: tipsSpan.textContent = "密码强度:超强"; break;
            }


        });
    }

    phoneInp.onchange = phoneInp.onblur = function () {
        isPhoneRight = false;
        var phone = phoneInp.value.trim();
        var reg = /^1[2-9]\d{9}$/;
        var tipsSpan = next(phoneInp);

        judgeRuler(phone, reg, tipsSpan, "请输入正确的手机号", function () {
            console.log("验证成功");

            // 还要连接数据库  判断手机号是否存在
            $.ajax({
                type: "get",
                url: "../php/isExistPhone.php",
                data: {
                    phone
                },
                dataType: "json",
                success(result) {
                    console.log(result);
                    if (result.status) {
                        isPhoneRight = true;
                    } else {
                        tipsSpan.textContent = result.msg;
                        tipsSpan.className = "err";
                        isPhoneRight = false;
                    }
                }
            })

        });

    }

    //  wlc123123@qq.com
    emailInp.onchange = emailInp.onblur = function () {

        isEmailRight = false;
        var email = emailInp.value.trim();
        var reg = /^\w{6,12}@\w{2,9}\.com$/;
        var tipsSpan = next(emailInp);

        judgeRuler(email, reg, tipsSpan, "请输入正确的邮箱", function () {
            console.log("验证成功");

            // 还要连接数据库  判断手机号是否存在
            $.ajax({
                type: "get",
                url: "../php/isExistEmail.php",
                data: {
                    email
                },
                dataType: "json",
                success(result) {
                    console.log(result);
                    if (result.status) {
                        isEmailRight = true;
                    } else {
                        tipsSpan.textContent = result.msg;
                        tipsSpan.className = "err";
                        isEmailRight = false;
                    }
                }
            })
        });

    }


    codeInp.onchange = codeInp.onblur = function () {
        isCodeRight = false;

        var code = codeInp.value.trim();   // 用户输入的验证码
        var codeCon = createCode.textContent;  // 随机生成的验证码
        var reg = new RegExp(codeCon, "i");
        // console.log(reg)
        var tipsSpan = next(next(codeInp));

        judgeRuler(code, reg, tipsSpan, "验证码有误", function () {
            console.log("验证成功");
            isCodeRight = true;
        });

    }

    // 在规则都正确的情况下  提交注册
    btn.onclick = function () {
        if (isUserRight && isPwdRight && isPhoneRight && isEmailRight && isCodeRight) {
            // console.log("提交注册");

            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;

            register({ user, pwd, phone, email }).then(data => {
                if (data.status) {
                    location.href = "./login.html";
                } else {
                    alert(data.msg);
                }
            }).catch(err => {
                throw err;
            })

            // $.ajax({
            //     type: "post",
            //     url: "../php/register.php",
            //     data: { user, pwd, phone, email },
            //     dataType: "json",
            //     success(data) {
            //         if (data.status) {
            //             location.href = "./login.html";
            //         } else {
            //             alert(data.msg);
            //         }
            //     }
            // })



            // var xhr = new XMLHttpRequest();

            // xhr.open("post", "../php/register.php", true);

            // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            // xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`);

            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         var result = xhr.responseText;
            //         var data = JSON.parse(result);
            //         console.log(data);

            //         if (data.status) {
            //             location.href = "./login.html";
            //         } else {
            //             alert(data.msg);
            //         }


            //     }
            // }





        } else {
            console.log("请输入完整内容");
        }
    }

    function judgeRuler(con, reg, tipsSpan, tips, fn) {
        if (con) {
            if (reg.test(con)) {
                tipsSpan.textContent = "√";
                tipsSpan.className = "right";
                if (fn) {  // 如果传入了函数 就执行
                    fn();
                }
            } else {
                tipsSpan.textContent = tips;
                tipsSpan.className = "err";
            }
        } else {
            tipsSpan.textContent = "*";
            tipsSpan.className = "err";
        }
    }



    function next(ele) {
        return ele.nextElementSibling || ele.nextSibling;
    }


</script>


</html>